<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../../assets/libs/jquery/jquery-3.6.1.min.js"></script>
</head>

<body>
  <button id="fadeIn">fadeIn</button>
  <button id="fadeOut">fadeOut</button>
  <button id="fadeToggle">fadeToggle</button>
  <button id="fadeTo">fadeTo</button>
  <br>
  <img src="../../../assets/images/Cheems.jpg">

  <script>
    function fadeIn() {
      $('img').stop().fadeIn(1000)
    }

    function fadeOut() {
      $('img').stop().fadeOut(1000)
    }

    function fadeToggle() {
      $('img').stop().fadeToggle(1000)
    }

    function fadeTo() {
      $('img').stop().fadeTo(1000, 0.5)
    }

    $('#fadeIn').click(fadeIn)
    $('#fadeOut').click(fadeOut)
    $('#fadeToggle').click(fadeToggle)
    $('#fadeTo').click(fadeTo)
  </script>
</body>

</html>